
header.header {
	position: relative;
	width: 100%;
	background-color: #1c1c1c;
	top: 0; left: 0;
	z-index: 99999;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	@include transition(all .3s ease);
	&.header-home {
		position: absolute;
		background-color: transparent;
		top: 0; left: 0;
		padding-top: 20px;
	}
	&.header-sticky.header-fixed {
		position: fixed;
		padding-top: 0;
		background-color: #1c1c1c;
		.logo {
			padding: 15px 0;
			a {
				img {
					max-height: 25px;
				}
			}
		}
		.on-navigation {
			padding: 8px 0;
		} 
	}
	.logo {
		float: left;
		padding: 18px 0;
		a {
			display: inline-block;
			img {
				max-height: 30px;
				@include transition(all .3s ease);
			}
		}
	}
	.on-navigation {
		padding: 15px 0;
		&.text-right {
			margin-right: -23px;
		}
		ul.nav {
			display: inline-block;
			font-size: 0;
			margin: 0;
			li {
				position: relative;
				display: inline-block;
				margin: 0 23px;
				&:before {
					display: none;
				}
				a {
					display: inline-block;
					font-family: $la;
					font-size: 12px;
					font-weight: 700;
					color: #fff;
					text-align: center;
					background: none;
					padding-left: 0;
					padding-right: 0;
					@include transition;
				}
				&:hover {
					> a {
						color: $color;
					}
				}
				&.active, &.current-menu-item {
					> a {
						color: $color;
					}
					> .plus {
						color: $color;
					}
				}
			}
			span.plus {
				position: static;
				color: #fff;
				font-size: 20px;
				text-align: center;
				cursor: pointer;
				margin-right: 5px;
				> span {
					display: inline-block;
					@include transition;
					line-height: .5em;
				}
			}
			.sub-menu {
				position: absolute;
				width: 220px;
				margin: 0;
				z-index: 9;
				top: 55px;
				left: 0;
				opacity: 0;
				visibility: hidden;
				text-align: left;
				background-color: #000;
				border: 3px solid #333;
				@include transition(all .3s linear .2s);
				li {
					display: block;
					a {
						display: block;
						padding: 12px 15px;
						text-align: left;
					}
				}
				.sub-menu {
					@include translateX(100%);
					top: 0;
				}
				span.plus {
					position: absolute;
					top: 0; right: 0;
					display: block;
					font-size: 26px;
					width: 50px; height: 45px;
					z-index: 9;
					margin-right: 0;
				}
			}
			li:hover {
				> .sub-menu {
					opacity: 1;
					visibility: visible;
				}
				> span.plus {
					color: $color;
				}
			}
		}
	}
	.head-social {
		display: inline-block;
		a {
			font-size: 14px;
			color: #fff;
			padding: 0 10px;
			@include transition;
			&:hover {
				color: $color;
			}
		}
	}
	&.header-2 {
		background-color: #fff;
		border-bottom: 1px solid #ddd;
		&:before {
			background-color: #fff;
		}
		.navigation {
			ul.nav {
				li {
					a {
						color: #000;
					}
					.plus {
						color: #000;
					}
					&.active, &.current-menu-item {
						> a {
							color: $color;
						}
						> .plus {
							color: $color;
						}
					}
					&:hover {
						> a {
							color: $color;
						}
					}
				}
				.sub-menu {
					background-color: #fff;
					border: 3px solid #eee;
				}
			}
		}
		.head-social {
			a {
				color: #000;
				&:hover {
					color: $color;
				}
			}
		}
		.minicart-wrap {
			.toggle-minicart {
				color: #000;
				@include transition;
				&:hover {
					color: $color;
				}
			}
		}
		.open-menu-mobile {
			span {
				background-color: #000;
				@include transition;
				&:before, &:after {
					background-color: #000;
				}
			}
			&.open-menu-active {
				background-color: $color;
			}
		}
	}
}
html.ie9 {
	header.header {
		.navigation {
			ul.nav {
				> li {
					> .sub-menu {
						margin-top: -20px;
					}
				}
				.sub-menu {
					left: -6px;
					.sub-menu {
						top: -3px;
					}
				}
			}
		}
	}
}
.minicart-wrap {
	position: relative;
	display: inline-block;
	text-align: left;
	.toggle-minicart {
		display: inline-block;
		font-family: "Montserrat", sans-serif;
		font-size: 12px;
		font-weight: 400;
		color: #fff;
		text-align: center;
		background: none;
		padding: 0 18px;
		cursor: pointer;
		&:hover {
			color: $color;
		}
		&.active {
			span {
				position: relative;
				&:before {
					content: '';
					display: block;
					position: absolute;
					width: 6px; height: 6px;
					background-color: $color;
					@include rounded(50%);
					top: -6px; right: -6px;
				}
			}
		}
	}
	.minicart-body {
		position: absolute;
		background-color: #fff;
		width: 280px;
		top: 50px;
		opacity: 0;
		visibility: hidden;
		left: 0;
		border: 4px solid #eee;
		z-index: 99;
		@include transition(all .4s ease);
		&.cart-toggle {
			top: 35px;
			opacity: 1;
			visibility: visible;
		}
		h4 {
			margin: 0;
			padding: 15px 0;
		}
		.minicart-list {
			margin: 0;
			border-top: 4px solid #eee;
			li {
				margin: 0;
				padding: 12px 18px;
				position: relative;
				&:before {
					display: none;
				}
				.product-thumb {
					float: left;
					display: inline-block;
					margin-right: 12px;
					margin-top: 3px;
				}
				.product-name {
					a {
						font-family: $ms;
						font-size: 12px;
						color: #666;
						&:hover {
							color: $color;
						}
					}
				}
				.qty-wrap {
					.product-quantity, .amount {
						font-family: $ms;
						font-size: 12px;
						color: #666;
					}
					.quantity {
						margin-left: 0;
					}
				}
				.product-remove {
					position: absolute;
					top: 13px; right: 24px;
					a {
						font-size: 10px;
						color: #000;
						&:hover {
							color: $color;
						}
					}
				}
			}
		}
		.minicart-total {
			border-top: 4px solid #eee;
			font-family: $ms;
			font-size: 16px;
			color: #000;
			padding: 15px;
		}
		.minicart-footer {
			border-top: 4px solid #eee;
			padding: 14px;
			.awe-btn {
				margin: 0;
				width: 100%;
			}
		}
	}
}

/* Menu mobile */

.open-menu-mobile {
	position: absolute;
	display: none;
	width: 50px; height: 50px;
	cursor: pointer;
	margin: auto;
	top: 0; right: 0; bottom: 0;
	span {
		position: absolute;
		display: block;
		font-size: 0;
		width: 20px; height: 2px;
		background-color: #fff;
		margin: auto;
		top: 0; right: 0;
		bottom: 0; left: 0;
		@include transition;
		&:before, &:after {
			content: '';
			display: block;
			position: absolute;
			width: 20px; height: 2px;
			background-color: #fff;
			left: 0;
			@include transition;
		}
		&:before {
			top: -6px;
		}
		&:after {
			bottom: -6px;
		}
	}
	&.open-menu-active {
		background-color: rgba(255,255,255,.12);
		span {
			@include rotate(-90);
			background-color: $color;
			&:before, &:after {
				background-color: $color;
			}
		}
	}
}
.toggle-translate {
    @include translate(-270px, 0);
}
.overflow-hidden {
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}
header.header {
	.container {
		> .minicart-wrap {
			position: absolute;
			top: 50%; right: 50px;
			@include translateY(-50%);
			z-index: 999;
			.minicart-body {
				left: auto;
				right: -45px;
			}
		}
	}
}
.menu-mobile {
	position: fixed;
	top: 0; right: 0;
	width: 270px; height: 100%;
	overflow: hidden;
	opacity: 0;
	@include transition-delay(.3s);
	background-color: #000;
	/*fix mobile*/
	box-shadow: 0 0 0 5px #000, inset 0 0 0 5px #000;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	&:after {
		/*fixscroll overflow hidden android*/
		content: '';
		display: block;
		position: fixed;
		width: 0; height: 0;
		left: 0; bottom: 0;
	}
	&.fixSfr {
		opacity: 1;
		@include transition-delay(0s);
	}
	&.overflow-auto {
		overflow: auto;
	}
	nav.navigation {
		margin: 0;
		padding: 30px 0;
		height: 100%;
		&.text-right {
			text-align: left;
		}
		.nav {
			margin: 0;
			li {
				margin: 0;
				padding: 0;
				border-bottom: 1px solid rgba(255,255,255,.12);
				&:before {
					display: none;
				}
				a {
					display: block;
					font-family: $ms;
					font-size: 12px;
					color: #fff;
					background: none;
					padding: 12px 15px;
					&:hover {
						color: $color;
					}
				}
				&:last-child {
					border: 0;
				}
				span.plus {
					position: absolute;
					top: 0; right: 0;
					display: block;
					color: #fff;
					font-size: 26px;
					width: 50px; height: 45px;
					text-align: center;
					cursor: pointer;
					z-index: 9;
					> span {
						display: inline-block;
						@include transition;
						line-height: .5em;
					}
					&.plus-active {
						> span {
							@include rotate(45);
							color: $color;
						}
						+ a {
							color: $color;
							background-color: rgba(255,255,255,.12);
						}
					}
				}
				&.active, &.current-menu-item {
					> a {
						color: $color;
					}
					> .plus {
						color: $color;
					}
				}
			}
		}
		.sub-menu {
			display: none;
			margin: 0;
			border-top: 1px solid rgba(255,255,255,.12);
			li {
				a {
					position: relative;
					font-size: 10px;
					text-indent: 10px;
					&:before {
						content: '';
						display: block;
						position: absolute;
						width: 2px; height: 2px;
						@include rounded(50%);
						margin: auto;
						left: 15px; top: 0; bottom: 0;
						background-color: #fff;
					}
				}
			}
		}
	}
	.head-social {
		padding: 20px 0;
		border-top: 1px solid rgba(255,255,255,.12);
		a {
			margin: 5px 15px;
			color: #fff;
			&:hover {
				color: $color;
			}
		}
	}
	~ header.header {
		min-height: 50px;
		.container {
			.logo {
				padding: 10px 0;
			}
		}
	}
}
header.header .navigation ul.nav .sub-menu .left {
	@include translateX(100%);
}
header.header .navigation ul.nav .sub-menu .right {
	@include translateX(-100%);
	left: -6px;
}

.breadcrumbs-wrapper {
	background-color: #e8e8e8;
	padding: 20px 0;
	.breadcrumbs {
		background: none;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 0;
		li {
			position: relative;
			display: inline-block;
			font-family: $pd;
			font-size: 12px;
			font-style: italic;
			color: #a3a3a3;
			margin-left: 12px;
			margin-right: 12px;
			span {
				color: #141414;
			}
			a {
				color: #a3a3a3;
				&:hover {
					color: $color;
				}
			}
			&:after {
				content: '//';
				display: block;
				position: absolute;
				top: 50%; right: -12px;
				@include translate(50%, -50%);
			}
			&:last-child {
				&:after {
					display: none;
				}
			}
		}
	}
}